<template>
  <div>
    <el-container>
    <my-head></my-head>
    <div style="width: 90%">
      <el-row>

        <div style="width:90%;height:300px;margin-left: 10%;">
          <el-card class="box-card" style="height: 290px">
            <el-row>
              <el-col :span="10" style="width: 50%">
                <el-card :body-style="{ padding: '1px' }">
                  <img style="width: 100%;height: 250px"  :src="this.courseDetail.coursePic" class="image">
                </el-card>
              </el-col>
              <el-col :span="10" style="width: 50%">
                <el-card :body-style="{ padding: '1px' }">
                  <div slot="header" class="clearfix">
                    <span style="font-size: 18px">{{this.courseDetail.courseName}}</span>
                  </div>
                  <el-row>
                    <el-col style="width: 20%">
                      评分：
                    </el-col>
                   <el-col style="width: 50%">

                     <el-rate
                       v-model="value"
                       disabled
                       show-score
                       text-color="#ff9900"
                       score-template="{value}">
                     </el-rate>
                   </el-col>
                  </el-row>
                  <el-row style="margin-top: 30px">
                    <el-col style="width: 20%">
                      讲师：
                  </el-col>
                    <el-col style="width: 5%">
                      <img style="height: 20px;"  :src="this.courseDetail.qfTeach.teachImage" class="image">
                    </el-col>
                    <el-col style="width: 40%">

                      {{this.courseDetail.qfTeach.teachName}}
                    </el-col>
                  </el-row>
                  <el-row style="margin-top: 30px">
                    <el-col style="width: 20%">
                     价格：
                    </el-col>
                    <el-col style="width: 50%">
                      {{this.courseDetail.pay}}
                    </el-col>
                  </el-row>
                  <el-row style="margin-top: 30px">
                    <el-col>
                      <el-button type="success" @click="buyCourse" plain>立即参加</el-button>
                      <el-button type="warning" plain>免费试看</el-button>
                      <el-button type="primary" class="el-icon-goods" @click="addShopCard">加入购物车</el-button>

                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>

          </el-card>
        </div>
        <el-row style="width: 100%">

        <el-col style="width:55%;height:100%;background:paleturquoise;margin-left: 10%;margin-top: 5%">
          <el-card>
          <el-row>
            <el-col style="margin-top: 20px;margin-right: 90%">
              <h2>适用人群</h2>
            </el-col>
            <el-col style="margin-top: 20px;margin-right: 90%">
              <h4> {{this.courseDetail.users}}</h4>
            </el-col>

            <el-col style="margin-top: 20px;margin-right: 90%">
              <h2>课程简介</h2>
            </el-col>
            <el-col style="margin-top: 20px;margin-right: 90%">
              <h4>{{this.courseDetail.courseDescription}}</h4>
            </el-col>
            <el-col style="margin-top: 20px;margin-right: 90%">
              <div v-for="o in courseDetail.coursePicList " :key="o.id" class="text item">
                <el-image :src="o.pic"></el-image>
              </div>
            </el-col>

          </el-row>
          </el-card>
        </el-col>

        <el-col style="width:25%;height:100%;background:paleturquoise;margin-left: 10%;margin-top: 5%;float: right">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-size: 25px">评价</span>

            </div>
            <div v-for="o in comments" :key="o.id" class="text item">
              <el-row>
                <el-col style="margin-top: 20px ;width: 50%">
                  <!-- 头像-->
                  <el-image fit="fill"  style="width: 50px; height: 50px" :src="o.liveUser!=null?o.liveUser.pic:'https://img0.baidu.com/it/u=2140417149,2610093661&fm=253&fmt=auto&app=120&f=JPEG?w=423&h=542'">头像</el-image>
                  <span>{{o.liveUser!=null?o.liveUser.loginName:"匿名"}}</span>
                </el-col>
                <el-col>

                  <el-rate
                    v-model="o.score"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}">
                  </el-rate>
                </el-col>
                <el-col style="margin-top: 20px">
                  <span>{{o.comment}}</span>
                </el-col>
              </el-row>
            </div>
            <el-button  @click="dialogVisibleFun">查看更多</el-button>
          </el-card>
        </el-col>

        </el-row>

      </el-row>
      <el-dialog
        title="评论"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose">

        <el-card class="box-card">

          <div v-for="o in comments" :key="o.id" class="text item">
            <el-row>
              <el-col style="margin-top: 20px ;width: 50%">
                <!-- 头像-->

                <el-image fit="fill"  style="width: 50px; height: 50px" :src="o.liveUser!=null?o.liveUser.pic:'https://img0.baidu.com/it/u=2140417149,2610093661&fm=253&fmt=auto&app=120&f=JPEG?w=423&h=542'">头像</el-image>
                <span>{{o.liveUser!=null?o.liveUser.loginName:"匿名"}}</span>
              </el-col>
              <el-col>

                <el-rate
                  v-model="o.score"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}">
                </el-rate>
              </el-col>
              <el-col style="margin-top: 20px">
                <span>{{o.comment}}</span>
              </el-col>
            </el-row>
          </div>
          <el-pagination
            layout="prev, pager, next"
            :total="total" :current-page="this.params.page" :page-size="this.params.size" @current-change="change">
          </el-pagination>
        </el-card>



        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
      </el-dialog>
    </div>
    <el-footer>
      <my-footer></my-footer>
    </el-footer>
      </el-container>
  </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "",
        data(){
          return{
            value: 5,
            courseDetail:{
              qfTeach:{
                teacherImg:''
              }
            },
            comments:[],
            dialogVisible: false,
            total: 10,
            params:{
              page:1,
              size:2
            },
            id:'',
            teacherid:"",
          }
        },
      methods:{
          //根据课程id查询课程详细信息
          findCourseById:function () {
            this.$axios.get("/qflive-course/course/findCourseDetailById/"+this.id).then(res=>{
                if (res.data.code==1){
                    this.courseDetail = res.data.data;
                    this.teacherid=res.data.data.qfTeach.id;
                }else{
                    this.$router.push("/123")
                }
            })
          },
        //根据课程id查询评论列表默认查询5个
          findCourseCommentByCourseId:function () {
            this.$axios.get("/qflive-course/course/findCourseCommentByCourseId/"+this.id+"/"+this.params.page+"/"+this.params.size).then(res=>{
              if (res.data.code==1){
                this.comments = res.data.data;
                this.total = res.data.total;
              }
            })
          },
        //添加到购物车
        addShopCard:function(){
          //请求后端将该课程添加到购物车
            this.$axios.post("/qflive-shopcart/shopcart/addShopCart",{"courseid":this.id,"teacherid":this.teacherid}).then(res=>{
            if (res.data.code==1){
              const h = this.$createElement;
              this.$message({
                message: h('p', null, [
                  h('span', null, '购物车添加 '),
                  h('i', { style: 'color: teal' }, '成功')
                ])
              });
            }else{
              this.$message(res.data.msg);
            }
          })
        },
        //打开模态窗口，查询所有评论
        dialogVisibleFun:function () {
          this.dialogVisible= true;
          this.params.size=5;
          this.findCourseCommentByCourseId();
        },
        change:function (page) {
          this.params.page=page;
          this.findCourseCommentByCourseId();
        },
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        buyCourse(){
            //跳转到付款页面
          this.$router.push("/confirm/")
        }
      },
      mounted(){
          this.id = this.$route.params.id;
          this.findCourseById()
          this.findCourseCommentByCourseId()
      }
    }
</script>

<style scope>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>

